<template>
  <div class="aside-box">
    <ul>
      <li>
        <router-link to="/musichome/findmusic" tag="span">
          <span>
            <i class="iconfont icon-eye"></i>
            <i>发现音乐</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/playlist" tag="span">
          <span>
            <i class="iconfont icon-music-list"></i>
            <i>推荐歌单</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/newmusic" tag="span">
          <span>
            <i class="iconfont icon-zuixin"></i>
            <i>最新音乐</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/musicvideo" tag="span">
          <span>
            <i class="iconfont icon-mv"></i>
            <i>最新MV</i>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/musichome/search" tag="span">
          <span class="el-icon-search"></span>
          <span>搜索音乐</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      path: "/",
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.path = val.path
      },
      // 深度观察监听
      deep: true,
    },
  },
}
</script>
<style lang="scss" scoped>
$primary: #409eff;
.aside-box {
  width: 100%;
  height: 100%;
  background: rgb(248, 248, 248);
  ul {
    width: 100%;
    height: calc(100% - 115px);
    li {
      width: 100%;
      height: 32px;
      line-height: 32px;
      list-style: none;
      text-align: left;
      transition: 0.5s;
      span {
        display: inline-block;
        text-align: center;
      }
      i {
        font-size: 14px;
        padding-right: 4px;
        font-style: normal;
      }
    }
    li:hover {
      cursor: pointer;
      background: $primary;
      color: white;
    }
  }
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}
.path_active {
  background: $primary;
  color: white;
}
.router-link-active {
  // color: #dd6d60;
  color: white;
}
</style>
